<!--
 * @Author: modefy
 * @Date: 2021-12-06 10:13:57
 * @LastEditors: modefy
 * @LastEditTime: 2023-05-15 18:24:44
 * @Description: Description
-->
<template>
    <div>
        <el-table fit :data="tableData" :border="true" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="id" label="序号" width="180"> </el-table-column>
            <el-table-column prop="name" label="名称" width="180"> </el-table-column>
            <el-table-column show-overflow-tooltip prop="bsite" label="B站地址" width="240"> </el-table-column>
            <el-table-column show-overflow-tooltip prop="techSite" label="技术网址" width="240"> </el-table-column>
            <el-table-column prop="writer" label="作者" width="180"> </el-table-column>
            <el-table-column prop="sortName" label="分类"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope: any">
                    <el-button type="primary" link size="small" @click=" handleUpdate(scope.row) ">编辑</el-button>
                    <el-button type="primary" link size="small" @click=" handleDeleteById(scope.row) ">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { handleDelete, getKnowList } from 'service/kld/knowledge';
import { ElMessage, ElMessageBox } from "element-plus"

export default defineComponent({
    props: {
        tableData: {
            type: Object,
            default: {}
        }
    },
    setup(props, context) {
        // context 中包含 attrs（组件属性），emit（事件分发）， slots（插槽）
        const { emit } = context;
        const handleUpdate = (row) => {
            emit("handleUpdate", row);
        }
        const handleDeleteById = (row) => {
            ElMessageBox.confirm("确定要删除吗，删除后将无法恢复?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    handleDelete(row.id);
                })
                .catch(() => {
                    ElMessage({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        }

        return { handleUpdate, handleDeleteById }
    },
})
</script>
